<template>
    <div class="grant page">
        <formHeader :title="'我的授权'"></formHeader>
        <div class="con">
            <div class="mode" ref="mode1">
                <img :src="img">
                <div class="desc" v-if="imgFlag">
                    <div>{{user.name}}</div>
                    <div>{{user.mobile}}</div>
                    <div>{{user.code}}</div>

                    <div class="time" >{{time}}</div>
                </div>
                <div class="level" v-if="imgFlag">{{level}}合作商</div>
            </div>
            <div class="mode" ref="mode2">
                <img :src="img1">
                <div class="desc" v-if="imgFlag1">
                    <div>{{user.name}}</div>
                    <div>{{user.mobile}}</div>
                    <div>{{user.code}}</div>

                    <div class="time" >{{time}}</div>
                </div>
                <div class="level" v-if="imgFlag1">{{level}}合作商</div>
            </div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {info} from '@/api/user'
    import html2canvas from "../../common/js/html2canvas";
    import {hide, showLoading} from "../../toast";
    export default {
        name: "grant",
        components:{
            formHeader
        },
        data(){
            return{
                user:{},
                img:require('./image/Hzc1.jpeg'),
                img1:require('./image/sjyx.jpeg',),
                imgFlag:true,
                imgFlag1:true,
                time:null,
                level:null
            }
        },
        activated() {
            showLoading('正在生成授权书')
            info().then(res=>{
                this.user = res.data
                this.level = res.extra.level.name
                this.time = this.user.time.split(' ')[0]
                this.$nextTick(()=>{
                    setTimeout(()=>{
                        this.plantGrant()
                        this.plantGrant1()
                    },1500)
                })
            })


        },
        methods:{
            async plantGrant(){
                let grant = this.$refs.mode1
                const options = {
                    type: 'dataURL'
                }
                this.img = await this.$html2canvas(grant, options);
                this.imgFlag=false
                hide()
            },
            async plantGrant1(){
                let grant = this.$refs.mode2
                const options = {
                    type: 'dataURL'
                }
                this.img1 = await this.$html2canvas(grant, options);
                this.imgFlag1=false
                hide()
            }

        }
    }
</script>

<style scoped lang="stylus">
    .grant
        background $page-bg
        .con
            margin-top 47px
            .mode
                height 530px
                position relative
            img
                width 100%
                height 100%
            .desc
                position absolute
                font-size 14px
                top: 250px
                left 150px
                line-height 25px
            .level
                width 100%
                display block
                text-align center
                position absolute
                font-size 14px
                top: 365px
                line-height 25px
                font-weight 600
            .time
                margin-top 90px


</style>
